<template>
  <el-scrollbar className="form-designer-left">
    <el-tabs>
      <el-tab-pane label="布局">
        <template v-for="layout in layouts">
          <Component :is="layout.getLabel()"></Component>
        </template>
      </el-tab-pane>
      <el-tab-pane label="控件">
        <div style="display: grid; grid-template-columns: 1fr 1fr;padding: 5px; grid-gap: 5px;">
          <el-text v-for="formComponent in formComponents">
            <Component :is="formComponent.getLabel()"></Component>
          </el-text>
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据域">
        <FieldList @selectField='selectFieldFromFieldList'
                   @removeSubForm="removeSubForm"
                   :formDefinition='formDefinition' @removeField="removeField"
                   ref="FieldList" :editingFieldDefinition="editingFieldDefinition"/>
      </el-tab-pane>
    </el-tabs>
  </el-scrollbar>
</template>
<script>
import DesignComponents from '@/components/form/DesignComponents';
import FieldList from '@/components/form/FieldList.vue';
import {DefaultFormDefinition} from '@/components/form/DefaultFormDefinition';

export default {
  name: 'LeftPanel',
  components: {
    FieldList
  },
  props: {
    formDefinition: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(DefaultFormDefinition))
    },
    editingFieldDefinition: {
      type: Object,
      default: () => undefined
    }
  },
  data() {
    return {
      layouts: DesignComponents.layouts,
      formComponents: DesignComponents.formComponents,
    };
  },
  methods: {
    selectFieldFromFieldList(fieldDefinition) {
      this.$emit('selectField', fieldDefinition.id);
    },
    removeSubForm(subformId) {
      this.$emit('removeSubForm', subformId);
    },
    removeField(fieldId) {
      this.$emit('removeField', fieldId);
    },
  }
};
</script>
